<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script type="text/javascript" src="JObj.js"></script>
<style>
.imgView{width:100px;height:100px;border:5px solid #eeeeee;float:left;position:relative;overflow:hidden;margin:5px;}
.imgView .progress{position:absolute;bottom:0;right:0;background:#666666;height:3px;width:0px;}
.imgView .progress .bar{width:0;height:100%;background:#00CC33;}
</style>
</head>

<body>
<input type="button" value="load" onclick="test()"/>
<script type="text/javascript">
JObj.plugin("JImgLoader");

var start = function(url,rule){
	rule.progress.style.width = "50px";
}

var process = function(url,loadedBytes,totalBytes,rule){
	rule.bar.style.width = Math.round(loadedBytes * 100 * 100 / totalBytes) / 100 + '%';
}

var compete = function(url,status,width,height,rule){
	rule.div.innerHTML = "";
	var img = JObj.$c("IMG");
	img.src = url;
	rule.div.appendChild(img);
	delete rule.div;
	delete rule.progress;
	delete rule.bar;
	delete rule;
}

var error = function(url,status,errorCode,rule){
	rule.div.innerHTML = errorCode;
	delete rule.div;
	delete rule.progress;
	delete rule.bar;
	delete rule;
}

var urls = [
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2001.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2002.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2003.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2004.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2005.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2006.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2007.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2008.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2009.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2010.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2011.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2012.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2013.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2014.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2015.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2016.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2017.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2018.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2019.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2020.jpg',
	'http://desk.blueidea.com/DESK/DZFG/Road_2/Road_2021.jpg',
];

var test = function(){
	for(var i=0;i<urls.length - 1;i++){
		var t = JObj.$c("DIV");
		t.className = "imgView";
		document.body.appendChild(t);
		
		div = JObj.$c("DIV");
		t.appendChild(div);
		
		var progress = JObj.$c("DIV");
		t.appendChild(progress);
		progress.className = "progress";
		
		var bar = JObj.$c("DIV");
		progress.appendChild(bar);
		bar.className = "bar";
		
		var rule = {
			onStart:start,
			onProcess:process,
			onComplete:compete,
			onError:error,
			url:urls[i],
			
			div:div,
			progress:progress,
			bar:bar
		}
		
		JObj.Plugin.JImgLoader.load(rule);
	}
}
</script>
</body>
</html>
